import React from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { Ionicons } from "@expo/vector-icons";
import { createStyles } from "./index.style";

const GroupDescription = () => {
  const { colors } = useTheme();
  const styles = createStyles(colors);

  // 模拟数据
  const groupInfo = {
    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
    name: "鸽王精英",
    description: "王者荣耀开黑交友兴趣群 来了就是朋友 一起开黑",
  };

  const handleAvatarPress = () => {
    console.log("Avatar pressed");
    // 处理头像点击事件
  };

  const handleNamePress = () => {
    console.log("Name pressed");
    // 处理名称点击事件
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.avatarContainer}
          onPress={handleAvatarPress}
        >
          <Image source={{ uri: groupInfo.avatar }} style={styles.avatar} />
        </TouchableOpacity>

        <View style={styles.infoContainer}>
          <TouchableOpacity
            style={styles.nameContainer}
            onPress={handleNamePress}
          >
            <Text style={styles.name} numberOfLines={1}>
              {groupInfo.name}
            </Text>
            <Ionicons
              name="chevron-forward"
              size={16}
              color={colors.text.secondary}
              style={styles.chevron}
            />
          </TouchableOpacity>

          <Text style={styles.description} numberOfLines={2}>
            {groupInfo.description}
          </Text>
        </View>
      </View>
    </View>
  );
};

export default GroupDescription;
